<template>
	<view scroll-y="true" class="wrapper">
	
		<index-banner :banner="banner"></index-banner>
		<view class="index">
			<nav-bar :icon="iconList"></nav-bar>
			<view class="tab-container">
				<div class="tab-bar">
					
					<view class="tab-btn" :class="{active:tabIndex===1}" @tap="switchTab(1)">车型查询</view>
					<view class="tab-btn" :class="{active:tabIndex===0}" @tap="switchTab(0)">参数查询</view>
				</div>
				<template v-if="tabIndex===1">
					<searchCar/>
				</template>
				<template v-if="tabIndex===0">
					<searchCrane/>
				</template>
			</view>
			<hot-car-list :list="hotcrane" />
			<new-car-list :list="newcrane" />
		</view>
		
	</view>
</template>

<script>
	import navBar from './components/navBar.vue'
	import hotCarList from './components/hotCarList.vue'
	import newCarList from './components/newCarList.vue'
	import indexBanner from './components/indexBanner.vue'
	import searchCar from '../common/searchCar.vue'
	import searchCrane from '../common/searchCrane/index.vue'
	
	import {
		getIndex,
		getMeIndex,
		member
	} from '@/api/crane.js'
	import {
		goPage
	} from '@/utils/crane'

	export default {
		components: {
			navBar,
			hotCarList,
			newCarList,
			indexBanner,
			searchCar,
			searchCrane
		},
		data() {
			return {
				userids:"",
				banner: [],
				hotcrane: [],
				newcrane: [],
				iconList: [],
				tabIndex: 0,
				userInfo: this.$store.state.app.userInfo,
				iconserver: [],
				iconsystem: [],
				
			};
		},
		async onLoad(options) {
			console.log("测试error12",1111111111111111111)
			uni.getUserInfo({
				success: (res) => {
					console.log("测试res",res)
				},
				fail: (err) => {
					console.log("测试error15",err)
					console.log("测试error",err)
				}
			})
			
			
			const data = await uni.getStorageSync('pageIndex');
			if (data) {
				this.handleData(data);
			}
			await this.getIndexData();
			await this.getUserLocation(options);
			// if (!_this.$store.state.app.uid) {
			// 	const userInfo = await uni.getStorageSync('userInfo');
			
			// 	if (userInfo) {
			
			// 		await _this.handleUserInfo(userInfo);
			// 		await _this.getMeIndexData(userInfo.uid);
			// 	} else {
			// 		await _this.getUserInfo().then(() => {
			
			// 			_this.getMeIndexData(_this.$store.state.app.uid);
			// 		})
			// 	}
			// } else {
			
			// 	await _this.getMeIndexData(_this.$store.state.app.uid);
			// 	console.log()
			// }
			
		},
		watch: {
			isLogin: {
				deep: true, //深度监听设置为 true
				handler: function(newV, oldV) {
					// 优惠券弹窗
					var newDates = new Date().toLocaleDateString();
					if (newV) {
						try {
							var oldDate = uni.getStorageSync('oldDate') || '';
						} catch {}
						if (oldDate != newDates) {
							// 需要登陆之后请求的数据
							console.log('需要登陆之后请求的数据');
						}
					}
				}
			}
		},
		onShow() {
			console.log(123,this.$store.state.app.uid)
			// this.userids=this.$store.state.app.uid
			// uni.setStorageSync(
			//      "userid", 
			// 	  this.userids
			     
			// ) 
			
		},
		onReady() {
			
			this.getMeIndexData()
			// 加载dom
			uni.getStorageSync("payVipDay")
			console.log("测试1111111111111111",uni.getStorageSync("payVipDay"))
			
		},
		methods: {
			getMeIndexData: function(uid) {
				const _this = this;
				const data = uni.getStorageSync('pageMe');
				// this.vipDay=data.userinfo.vipDay;
				
				// uni.setStorageSync('payVipDay',"0")
				// this.expiredTime=data.userinfo.expiredTime.substring(0,10);
					// uni.setStorageSync(
					//      times,
					//      123
					// )
				console.log(222222,data)
				if (data) {
					_this.iconserver = data.iconserver;
					_this.iconsystem = data.iconsystem;
				}
				getMeIndex(uid).then(res => {
					console.log("会员111",res)
					this.payVipDay=res.data.userinfo.payVipDay;
					this.expiredTime=res.data.userinfo.expiredTime.substring(0,10);
					_this.iconserver = res.data.iconserver;
					_this.iconsystem = res.data.iconsystem;
					uni.setStorage({
						key: 'pageMe',
						data: res.data,
					});
				})
			},
			ceshi(){
				 
			},
			ceshi1(){
			console.log(12131312313213)
			console.log(this.sessionGet("uerInfo")	)
			
			},
			sessionSet:function (key,value = "") {
				
				//保存在本地
				uni.setStorageSync(
				     key,  
				     value
				) 
			},
			/**
			 * 读取保存本地数据
			 * @param {Object} msg
			 */
			sessionGet: function(key,callback) {
				callback(uni.getStorageSync(key))
			},
			getIndexData: function() {
				const _this = this;
				getIndex().then(res => {
					if (res.data) {
						_this.handleData(res.data);
						uni.setStorage({
							key: 'pageIndex',
							data: res.data,
						});
					}
				}).catch(e => {
					console.log('error----', e);
				})
			},
			handleData: function(data) {
				const _this = this;
				if (Array.isArray(data.icon)) {
					_this.iconList = data.icon;
				}
				if (Array.isArray(data.Banner)) {
					_this.banner = data.Banner;
				}
				if (Array.isArray(data.hotcrane)) {
					_this.hotcrane = data.hotcrane;
				}
				if (Array.isArray(data.newcrane)) {
					_this.newcrane = data.newcrane;
				}
			},
			getUserLocation: function(options) {
				const {
					state,
					scope
				} = options;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						try {
							uni.setStorageSync('user_latitude', res.latitude);
							uni.setStorageSync('user_longitude', res.longitude);
						} catch {}
					}
				});
			},
			switchTab: function(index) {
				console.log(index)
				this.tabIndex = index;
				
			}
		},

	};
</script>

<style lang="scss">
	page{
		height: 100%;
		
	}
	.wrapper {
		box-sizing: border-box;
		background: #F4F5F6;
		
	}

	.index {
		box-sizing: border-box;
		padding: 0 20upx;
	}

	.tab-container {
		padding-top: 40upx;
		margin-bottom: 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		overflow: hidden;
		.tab-bar {
			display: flex;
			height: 60upx;
			justify-content: space-between;
			align-items: stretch;
			border-radius: 8upx;
			background: #FFFFFF;
			padding: 0 20upx;

			.tab-btn {
				line-height: 58upx;
				flex: 0 0 48%;
				font-size: 28upx;
				text-align: center;
				border-radius: 8upx;
				border: 1upx solid #888888;

				&.active {
					background-color: #33ADFF;
					border-color: #33ADFF;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
